.grid-container {
    width: 100%;
}

.row:before, .row:after {
    content: "";
    display: block;
    height: 0;
    width: 0;
    visibility: hidden;
    clear: both;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 8.33%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

@colCount:24;
.col-loop(@i)when(@i<=@colCount){
    .col-@{i} {
        width: round((@i*100/@colCount)-0.005, 2)+0%;
    }
    .col-loop((@i + 1))
}
.col-loop(1);

@gutterMax:16;
.gutter-loop(@i)when(@i<=@gutterMax){
    .gutter-@{i} {
        margin-left: 0 - @i+0px; 
        margin-right: 0 - @i+0px; 
        [class*='col-'] {
            padding-left: @i+0px;
            padding-right: @i+0px;
        }
    }
    .gutter-loop((@i + 1))
}
.gutter-loop(1);